Gulp 是一套 Task Mananger 任務管理器,可以用來管理工作流程的每項任務:
如何使用
先用 npm 安裝
npm install --global gulp-cli
在專案資料夾執行 npm 初始化
npm init
在專案資料夾內安裝 gulp package:
npm install --save-dev gulp
在資料夾內建立 gulpfile.js 檔案:
function defaultTask(cb) {
// place code for your default task here
cb();
}
exports.default = defaultTask
在終端機執行測試,就可以看到測試結果:
gulp
src & dest
引入 gulp 內建的 API:src 和 dest
src 是檔案來源,dest 是目標位置,下面那段程式碼的意思就是把檔案從 src 複製到 dist,這就是最基本的 gulp 用法:
const { src, dest } = require('gulp');
function defaultTask(cb) {
return src('src/test.js')
.pipe(dest('dist'));
}
exports.default = defaultTask;
接下來會介紹各種常用的 plugin,在 src 和 dest 之間加入這些 plugin,可以幫助我們完成工作流程。
使用 plugin
使用 plugin 的方法都是先安裝:
npm install --save-dev gulp-babel
再引入至 gulpfile.js 內:
const { src, dest } = require('gulp');
const babel = require('gulp-babel');
接著查看文件看如果加入 task 裡面,以下會簡介常用的幾個 plugins,如何安裝及引入各個 plugin 就不再贅述~
gulp-babel
gulp-babel 就是再 gulp 任務管理器內執行 babel 轉換語法的 plugin。
下列程式碼是將 babel() 加入我們的 task 流程:
const { src, dest } = require('gulp');
const babel = require('gulp-babel');
function defaultTask() {
return src('src/test.js')
.pipe(babel({
presets: ['@babel/env']
//如果有設定過 .babelrc 就不用在放參數
}))
.pipe(dest('dist'));
}
exports.default = defaultTask;
gulp-uglify
gulp-uglify 可以針對 JavaScript 檔案進行壓縮與最小化。
下列程式碼是將 uglify 加入我們的 task 流程:
const { src, dest, series, parallel } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
function defaultTask() {
return src('src/*.js')
.pipe(babel())
.pipe(uglify())
.pipe(dest('dist'));
}
gulp-rename
經過 uglify 的 JavaScript 檔案,通常會命名成 .min.js 以做為區別,所以可以再引入 rename 套件。
將 rename 加入 task 流程:
const { src, dest, series, parallel } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
function defaultTask() {
return src('src/*.js')
.pipe(babel())
.pipe(uglify())
.pipe(rename({extname: '.min.js'}))
.pipe(dest('dist'));
}
經過 uglify 的檔案會被壓縮成一行,變數會被簡化,可以減少檔案大小:
gulp-sass
gulp-sass 套件可將 sass 轉換成 css。
將 gulp-sass 加入 task 流程:
const { src, dest } = require('gulp');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');
function defaultTask() {
return src('src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(dest('./css'));
}
exports.default = defaultTask;
gulp-clean-css
gulp-clean-css 類似 minify js 對 JavaScript 在做的事,可以把 css 檔案壓縮。
將 clean-css 加入流程,設定 sass 的編譯器,同時也加入 rename 這個 plugin,讓編譯完的 css 重新命名為 min.css。
做兩次 dest()
,編譯完 sass 先複製一次,變成 min.css 後再複製一次,這樣資料夾內就同時又被壓縮前和被壓縮後的檔案:
const { src, dest } = require('gulp');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
function compileCSS() {
return src('src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(dest('./css'))
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(rename({ extname: '.min.css' }))
.pipe(dest('./css'))
}
gulp-imagemin
gulp-imagemin 可將圖片檔案壓縮變小:
const { src, dest, series, parallel, watch } = require('gulp');
const imgMin = require('gulp-imagemin');
function minifyImg() {
return src('src/img/*')
.pipe(imgMin())
.pipe(dest('lib/img'))
}
exports.default= minifyImg;
series & parallel
const { src, dest, series} = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
function compileJS() {
return src('src/*.js')
.pipe(babel())
.pipe(uglify())
.pipe(rename({ extname: '.min.js' }))
.pipe(dest('dist'));
}
function compileCSS() {
return src('src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(dest('./css'))
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(rename({ extname: '.min.css' }))
.pipe(dest('./css'))
}
exports.default = series(compileCSS, compileJS);
// 引入 series,按順序執行 compileCSS 和 compileJS 兩個任務
exports.default = parallel(compileCSS, compileJS);
// 引入 parallel,同時執行 compileCSS 和 compileJS 兩個任務
exports.compileCSS = compileCSS
// 執行單個任務
使用 watch() 監控檔案並自動執行編譯
使用 gulp 內建的 API watch(),在檔案每次被改動的時候自動執行 gulp 工作流程,例如我們可以在 SCSS 檔案被更改的時候,自動執行 complieCSS 這個 task,就不需要每次都要手動執行流程。
但要注意的是,使用 watch() 的 task 不能是同步的,如果是同步的任務,將無法確認 task 的完成情況,task 將不會再次運行。
const { src, dest, series, parallel, watch } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
function compileJS() {
return src('src/*.js')
.pipe(babel())
.pipe(uglify())
.pipe(rename({ extname: '.min.js' }))
.pipe(dest('dist'));
}
function compileCSS() {
return src('src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(dest('./css'))
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(rename({ extname: '.min.css' }))
.pipe(dest('./css'))
}
exports.default = function() {
watch('src/*', series(compileCSS, compileJS));
}
補充資料:
Gulp 4.0 Tutorial 2020 | Concat & Minify Your CSS and JS